<template>
<Modal
        v-model="show"
        title="设置团队成员"
        @on-ok="team_member_ok"
        >
        <div>
			<div style="margin-bottom:10px;">
				<Input v-model="filter.nickname" placeholder="用户名称" style="width: 150px" />
				<Button type="primary" @click="qurey">搜索</Button>
			</div>
			<div style="height: 300px;">
				<div class="left_box">
					<CheckboxGroup v-model="sels">
					<ul class="mem_list">
						<li v-for="val in list">
							<Checkbox :label="val.id" >
								<Icon type="ios-contact"></Icon>
								<span>{{val.nickname}}({{val.mobile}})</span>
							</Checkbox>
						</li>
					</ul>
					</CheckboxGroup>
				</div>
				<div class="sel_member_box">
					<ul>
						<li v-for="val in sel_list">{{val.nickname}}({{val.mobile}})</li>
					</ul>
				</div>
			</div>
			<br/>
			<div class="page_box">
				<Page :total="count" @on-change="goto_page" :page-size="size" />
			</div>
		</div>
    </Modal>
</template>

<script>
export default {
    name: 'team_list',
    data () {
		let self = this;
        return {
            show:false,
			id:0,
			list:[],
			count:0,
			page:1,
			size:20,
			sels:[],
			filter:{
				nickname:''
			},
			sel_list:[]
        };
    },
	props:['value','data'],
	created(){
		this.sels = this.data;
		this.load_data();
	},
    computed: {
       
    },
	watch:{
		value(val){
			this.show = val;
		},
		show(val){
			if(val){
				this.sels = [];
				if(this.data){
					this.sels = this.data;
				}
				
				this.load_data();
			}
			this.$emit('input',val);
		},
		sels(val){
			
			this.sel_list = [];
			for(var i=0;i<this.list.length;i++){
				
				if(val.in_array(this.list[i].id)){
					this.sel_list.push(this.list[i]);
					
				}
			}
			
		},
	},
	methods:{
		load_data(){
			var self = this;
			var postdata = {
				page:self.page,
				size:self.size,
				f:this.filter
			};
			Whttp.load('User/User/get_list',postdata,function(result){
				self.list = result.list;
				self.count = parseInt(result.count);
			});
		},
		goto_page(page){
			this.page = page;
			this.load_data();
		},
		qurey(){
			this.page = 1;
			this.load_data();
		},
		team_member_ok(){
			this.$emit('change',this.sel_list);
		},
		is_disabled(id){
			if(!this.data){
				return false;
			}

			return this.data.in_array(id);
		}
	}
};
</script>
<style scoped> 
.mem_list{
	
}
.mem_list li{    line-height: 30px;}
.mem_list li i{font-size: 22px;}
.sel_member_box{
	    height: 100%;
    border-left: 1px solid #eee;
    margin-left: 50%;
    overflow: auto;
}
.sel_member_box ul{    padding-left: 10px;}
.sel_member_box li{line-height: 26px;}
.left_box{
	float: left;
    width: 50%;
    height: 100%;
    overflow: auto;
}
</style>